<template>
    <div class="deviceDetail">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">实时工单完成情况</span>
        </div>
        <div class="content">
            <div class="pieChart" ref="chartContainer"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const chartContainer = ref(null);
let myChart = null as any;
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
let echartData = [
    {
        name: '已关闭',
        value: '10',
    },
    {
        name: '处理中',
        value: '20',
    },
    {
        name: '未分配',
        value: '15',
    },
    {
        name: '未接受',
        value: '25',
    },
    {
        name: '已完成',
        value: '35',
    },
];
let formatNumber = function (num: any) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ',');
};
const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        color: color,
        title: [
            {
                text: '1345',
                x: 'center',
                top: '38%',
                textStyle: {
                    color: 'rgba(244, 169, 6, 1)',
                    fontSize: 20,
                    fontWeight: '700',
                },
            },
            {
                text: '总数',
                x: 'center',
                top: '50%',
                textStyle: {
                    fontSize: 12,
                    color: 'rgba(0, 227, 254, 1)',
                    foontWeight: '400',
                },
            },
        ],
        polar: {
            radius: ['44%', '50%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [
            {
                type: 'pie',
                radius: ['55%', '60%'],
                center: ['50%', '50%'],
                data: echartData,
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        // borderColor: '#364684',
                        // borderWidth: 2,
                    },
                },
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 60,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)',
                        },
                    },
                },
                label: {
                    normal: {
                        formatter: (params: any) => {
                            return '{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
                        },
                        padding: [0, -50, 25, -55],
                        rich: {
                            name: {
                                fontSize: 12,
                                align: 'left',
                                fontWeight: '400',
                                // padding: [4, 0, 0, 0],
                                color: '#fff',
                            },
                            value: {
                                fontSize: 12,
                                fontWeight: '400',
                                color: '#fff',
                                align: 'left',
                            },
                        },
                    },
                },
            },
            {
                name: '',
                type: 'pie',
                startAngle: 90,
                radius: '47%',
                hoverAnimation: false,
                center: ['50%', '50%'],
                itemStyle: {
                    normal: {
                        labelLine: {
                            show: false,
                        },
                        color: new echarts.graphic.RadialGradient(0.5, 1, 1, [
                            {
                                offset: 0,
                                color: 'rgba(0, 204, 228, 0)', // 底部透明
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 204, 228, 0.3)', // 顶部颜色
                            },
                        ]),
                        // borderWidth: 1,
                        // borderColor: '',
                        shadowBlur: 10,
                        // shadowColor: 'rgba(55,70,130, 1)'
                    },
                },
                data: [
                    {
                        value: 100,
                    },
                ],
            },
        ],
    };

    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.deviceDetail {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    // padding-left: vh(40);
    // padding-right: vh(38);
    background: url(@/assets/images/dailyMaintenance/bx01.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(61);
    width: vw(422);
    height: vh(252);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        .pieChart {
            width: 100%;
            height: vh(240);
        }
    }
}
</style>